/* eslint-disable no-nested-ternary */
import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
  Card,
  Button,
  Spin,
  Divider,
  Anchor,
  Row,
  Col,
  Table,
  Steps,
  Badge,
  Popover,
} from 'antd';
import { connect } from 'dva';
import queryString from 'query-string';
import router from 'umi/router';
import moment from 'moment';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import DescriptionList from '@/components/DescriptionList';
import HdlRemark from '@/pages/components/HdlRemark';
import ProRecording from '@/pages/components/Problem/ProblemPage/ProRecording';

const { Description } = DescriptionList;
const { Link } = Anchor;
const { Step } = Steps;

@connect(({ redempdetail, loading, publicdata }) => ({
  loading: loading.models.redempdetail,
  redempdetail,
  dictCode: publicdata.dictCode,
}))
@Form.create()
class BasicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      taskSource: null,
      stepDirection: 'horizontal',
    };
  }

  componentDidMount() {
    const {
      dispatch,
      location,
    } = this.props;
    const query = queryString.parse(location.search);
    // 获取详情信息
    dispatch({
      type: 'redempdetail/fetchRedEmpDetail',
      payload: query,
    });
    this.setState({ taskSource: query.taskSource || null });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const resetInfo = {
      sendId: null,
      responseDeduAssBaseDto: {}, // 基本信息
      responseDeduAssSendDto: {}, // 派单信息
      responseDeduAssDto: {}, // 已经减少的险种
      responseDeduInfo: {}, // 减员信息、
      rsponseDeduPdDto: {}, // 产品信息
      handDto: [], // 	办理备注
      probDets: [], // 问题记录
      recordList: [], // 联系记录
      execStatusDto: {}, // 执行状态
    };
    dispatch({
      type: 'redempdetail/updateModelData',
      payload: { ...resetInfo },
    });
  }

  render() {
    const {
      loading,
      redempdetail: {
        responseDeduAssBaseDto, // 基本信息
        responseDeduAssSendDto, // 派单信息
        responseDeduAssDto, // 减少险种信息
        responseDeduInfo, // 减员信息
        rsponseDeduPdDto, // 产品信息
        handDto, // 办理备注
        probDets, // 问题记录
        recordList, // 联系记录
        execStatusDto, // 执行状态
        expandedRowKeys,
      },
    } = this.props;
    const { taskSource, stepDirection } = this.state;
    const pdColumns = [
      {
        title: '产品',
        dataIndex: 'pdName',
        render: val => val || '--',
      },
      {
        title: '执行地',
        dataIndex: 'cityName',
        align: 'center',
        render: val => val || '--',
      },
      {
        title: '执行方',
        dataIndex: 'execTypeName',
        align: 'center',
        render: val => val || '--',
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        align: 'center',
        render: val => (val && moment(val).format('YYYY-MM-DD')) || '--',
      },
    ];
    const assColumns = [
      {
        title: '险种',
        dataIndex: 'assName',
        align: 'center',
      },
      {
        title: '执行地',
        dataIndex: 'areaName',
        align: 'center',
      },
      {
        title: '执行方',
        dataIndex: 'execTypeName',
        align: 'center',
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        align: 'center',
        render: val => (val && moment(val).format('YYYY-MM-DD')) || '--',
      },
    ];

    const customDot = (dot, { status }) =>
      status === 'process' ? (
        <Popover placement="topLeft" arrowPointAtCenter>
          {dot}
        </Popover>
      ) : (
        dot
      );

    return (
      <Form>
        <PageHeaderWrapper>
          <Spin tip="Loading..." spinning={loading}>
            <Anchor onClick={e => e.preventDefault()} targetOffset={50}>
              <Row type="flex" justify="space-around">
                <Col>
                  <Link href="#sendinfo" title="派单信息" />
                </Col>
                <Col>
                  <Link href="#basicinfo" title="基本信息" />
                </Col>
                {taskSource === '2' && (
                  <Col>
                    <Link href="#redemp" title="减员信息" />
                  </Col>
                )}
                {(taskSource === '3' || taskSource === '4') && (
                  <Col>
                    <Link href="#quoinfo" title="减少产品信息" />
                  </Col>
                )}
                {taskSource === '7' && (
                  <Col>
                    <Link href="#redass" title="减少险种信息" />
                  </Col>
                )}
                {execStatusDto && (
                  <Col>
                    <Link href="#executionstate" title="执行状态" />
                  </Col>
                )}
                {taskSource === '2' && (
                  <Col>
                    <Link href="#record" title="联系记录" />
                  </Col>
                )}
                <Col>
                  <Link href="#remark" title="办理备注" />
                </Col>
                <Col>
                  <Link href="#proRecording" title="问题记录" />
                </Col>
              </Row>
            </Anchor>
            <Card title={<span style={{ fontWeight: 'bolder' }}>派单信息</span>} id="sendinfo">
              <DescriptionList>
                <Description term="签约方">
                  {responseDeduAssSendDto.sendCorpName || '--'}
                </Description>
                <Description term="客户名称">{responseDeduAssSendDto.custName || '--'}</Description>
                <Description term="商务合同">
                  {responseDeduAssSendDto.custContName || '--'}
                </Description>
                <Description term="报价单">{responseDeduAssSendDto.quoName || '--'}</Description>
                <Description term="派单时间">
                  {(responseDeduAssSendDto.sendDate &&
                    moment(responseDeduAssSendDto.sendDate).format('YYYY-MM-DD HH:mm')) ||
                    '--'}
                </Description>
                <Description term="所属客服">{(responseDeduAssSendDto && responseDeduAssSendDto.primName) || '--'}</Description>
                <Description term="创建人">{(responseDeduAssSendDto && responseDeduAssSendDto.creName) || '--'}</Description>
              </DescriptionList>
            </Card>
            <Card title={<span style={{ fontWeight: 'bolder' }}>基本信息</span>} id="basicinfo">
              <DescriptionList>
                <Description term="姓名">{responseDeduAssBaseDto.empName || '--'}</Description>
                <Description term="证件类型">
                  {responseDeduAssBaseDto.idTypeName || '--'}
                </Description>
                <Description term="证件号">{responseDeduAssBaseDto.idCode || '--'}</Description>
                <Description term="性别">{responseDeduAssBaseDto.genderName || '--'}</Description>
                <Description term="国籍">{responseDeduAssBaseDto.nationName || '--'}</Description>
                <Description term="出生日期">
                  {(responseDeduAssBaseDto.birthDate &&
                    moment(responseDeduAssBaseDto.birthDate).format('YYYY-MM-DD')) ||
                    '--'}
                </Description>
                <Description term="电话">{responseDeduAssBaseDto.mobile || '--'}</Description>
                <Description term="员工邮箱">{responseDeduAssBaseDto.email || '--'}</Description>
              </DescriptionList>
            </Card>
            {/* 离职减员：减员信息 */}
            {taskSource === '2' && (
              <Card title={<span style={{ fontWeight: 'bolder' }}>减员信息</span>} id="redemp">
                {responseDeduInfo ? (
                  <div>
                    <DescriptionList style={{ marginBottom: 24 }}>
                      <Description term="离职日期">
                        {(responseDeduInfo.evaDate &&
                          moment(responseDeduInfo.evaDate).format('YYYY-MM-DD')) ||
                          '--'}
                      </Description>
                      <Description term="离职原因">
                        {responseDeduInfo.evaReasonName || '--'}
                      </Description>
                      {/* <Description term="业务结束年月">
                        {(responseDeduInfo.endDate &&
                          moment(responseDeduInfo.endDate).format('YYYY-MM')) ||
                          '--'}
                      </Description> */}
                      <Description term="业务结束日期">
                        {(responseDeduInfo.endDate &&
                          moment(responseDeduInfo.endDate).format('YYYY-MM-DD')) ||
                          '--'}
                      </Description>
                      {/* <Description term="是否办理失业">
                        {responseDeduInfo.unempFlagName || '--'}
                      </Description> */}
                      <Description term="是否离职联系">
                        {responseDeduInfo.deduConFlagName || '--'}
                      </Description>
                      {responseDeduInfo.stopEmpContFlagName && (
                        <Description term="是否终止劳动合同">
                          {responseDeduInfo.stopEmpContFlagName || '--'}
                        </Description>
                      )}
                      {/* <Description term="备注">{responseDeduInfo.remark || '--'}</Description> */}
                      <Description term="操作人">{rsponseDeduPdDto.operName || '--'}</Description>
                      <Description term="操作时间">
                        {(rsponseDeduPdDto.operTime &&
                          moment(rsponseDeduPdDto.operTime).format('YYYY-MM-DD HH:mm')) ||
                          '--'}
                      </Description>
                    </DescriptionList>
                    <Table
                      dataSource={rsponseDeduPdDto.pdDetailDtos || []}
                      columns={pdColumns}
                      rowKey="id"
                      defaultExpandedRowKeys={expandedRowKeys}
                      pagination={false}
                      style={{ width: 800 }}
                    />
                  </div>
                ) : (
                  '暂无数据'
                )}
              </Card>
            )}
            {/* 减少产品信息 */}
            {(taskSource === '3' || taskSource === '4') && (
              <Card title={<span style={{ fontWeight: 'bolder' }}>减少产品信息</span>} id="quoinfo">
                {rsponseDeduPdDto ? (
                  <div>
                    <DescriptionList style={{ marginBottom: 24 }}>
                      <Description term="停做原因">
                        {rsponseDeduPdDto.evaReasonName || '--'}
                      </Description>
                      <Description term="操作人">{rsponseDeduPdDto.operName || '--'}</Description>
                      <Description term="操作时间">
                        {(rsponseDeduPdDto.operTime &&
                          moment(rsponseDeduPdDto.operTime).format('YYYY-MM-DD HH:mm')) ||
                          '--'}
                      </Description>
                    </DescriptionList>
                    <Table
                      dataSource={rsponseDeduPdDto.pdDetailDtos || []}
                      columns={pdColumns}
                      rowKey="id"
                      pagination={false}
                      defaultExpandedRowKeys={expandedRowKeys}
                      style={{ width: 800 }}
                    />
                  </div>
                ) : (
                  '暂无数据'
                )}
              </Card>
            )}
            {/* 减少险种：已有险种信息 */}
            {taskSource === '7' && (
              <Card title={<span style={{ fontWeight: 'bolder' }}>减少险种信息</span>} id="redass">
                {responseDeduAssDto.operTime ? (
                  <div>
                    <DescriptionList style={{ marginBottom: 24 }}>
                      <Description term="停做原因">
                        {responseDeduAssDto.deduReasonName || '--'}
                      </Description>
                      <Description term="操作人">{responseDeduAssDto.operName || '--'}</Description>
                      <Description term="操作时间">
                        {(responseDeduAssDto.operTime &&
                          moment(responseDeduAssDto.operTime).format('YYYY-MM-DD HH:mm')) ||
                          '--'}
                      </Description>
                    </DescriptionList>
                    <Table
                      columns={assColumns}
                      dataSource={responseDeduAssDto.assDetailDtoList || []}
                      rowKey={(_, index) => index}
                      bordered
                      pagination={false}
                      style={{ width: 800 }}
                    />
                  </div>
                ) : (
                  '暂无数据'
                )}
              </Card>
            )}
            {/* 离职减员：执行状态 */}
            {execStatusDto && (
              <Card
                title={
                  <span style={{ fontWeight: 'bolder' }} id="executionstate">
                    执行状态
                  </span>
                }
              >
                {execStatusDto && execStatusDto.leafList && execStatusDto.leafList.length ? (
                  <Steps
                    direction={stepDirection}
                    progressDot={customDot}
                    style={{ width: '60%', margin: '0 auto', marginTop: 20 }}
                  >
                    {execStatusDto &&
                      execStatusDto.leafList.map(item => (
                        <Step
                          title={item.operLeafTypeName}
                          description={
                            !item.leafDetList.length ? (
                              `暂无${item.operLeafType === '3' ? '办理' : '申报'}内容`
                            ) : (
                              <div style={{ width: 400, fontSize: 12, textAlign: 'left' }}>
                                {item.leafDetList.map(leafDet => (
                                  <div key={leafDet.leafDetId}>
                                    <Badge
                                      status={
                                        item.operLeafType === 4
                                          ? leafDet.doneFlag === 3
                                            ? 'success'
                                            : 'default'
                                          : leafDet.doneFlag === 1
                                          ? 'success'
                                          : 'default'
                                      }
                                      text={
                                        <span style={{ lineHeight: '30px' }}>
                                          {leafDet.leafDetTypeName}&nbsp;
                                          <span style={{ color: '#999' }}>
                                            {leafDet.cityName ? `(${leafDet.cityName})` : ''}
                                          </span>
                                          &nbsp;:{leafDet.doneFlagName || '--'}
                                          <span
                                            style={{
                                              fontSize: '12px',
                                              color: '#999',
                                              marginLeft: 15,
                                            }}
                                          >
                                            {leafDet.operTime &&
                                              moment(leafDet.operTime).format('YYYY-MM-DD')}
                                          </span>
                                        </span>
                                      }
                                    />
                                    <br />
                                  </div>
                                ))}
                              </div>
                            )
                          }
                          status={item.doneFlag === 1 ? 'finish' : 'wait'}
                        />
                      ))}
                  </Steps>
                ) : (
                  '暂无数据'
                )}
              </Card>
            )}
            {/* 离职减员：联系记录 */}
            {taskSource === '2' && (
              <Card title={<span style={{ fontWeight: 'bolder' }}>联系记录</span>} id="record">
                {recordList && recordList.length
                  ? recordList.map((item, index) => (
                      <DescriptionList style={{ marginBottom: 24 }}>
                        {index > 0 && <Divider dashed />}
                        <Description term="联系方式">{item.contactInfo || '--'}</Description>
                        <Description term="联系电话">{item.contactMobile || '--'}</Description>
                        <Description term="联系人">{item.contactPer || '--'}</Description>
                        <Description term="联系时间">
                          {(item.contactTime &&
                            moment(item.contactTime).format('YYYY-MM-DD HH:mm')) ||
                            '--'}
                        </Description>
                        <Description term="备注">{item.remark || '--'}</Description>
                      </DescriptionList>
                    ))
                  : '暂无数据'}
              </Card>
            )}
            <div id="remark">
              <HdlRemark hdlRemark={handDto} />
            </div>
            <div id="proRecording">
              <ProRecording proRecording={probDets} />
            </div>
            <FooterToolbar style={{ width: '100%' }}>
              <Button onClick={() => router.goBack()}>返回</Button>
            </FooterToolbar>
          </Spin>
        </PageHeaderWrapper>
      </Form>
    );
  }
}

const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
